<template>
  <aside class="Sidebar">
    <h2></h2>
    <div class="nav-top">
      <div title="纵胜MES(WEB版)" class="com-logo-box">
        <img src="../assets/logo.png" alt="Logo" class="admin-logo" />
        <span class="admin-title">纵胜新材</span>
      </div>
      <div class="admin-info">
        <!-- <span class="admin-name">管理员</span>
        <span class="admin-role">超级管理员</span> -->
      </div>
    </div>
    <!-- 左边栏begin -->
    <div class="sidebar-content">
      <el-menu
        default-active="1"
        class="el-menu-vertical-demo"
        :collapse="isCollapsed"
        background-color="#ffffff"
        text-color="#000000"
        active-text-color="#93e362"
        @select="handleMenuClick"
        :unique-opened="true">
        <!-- 修改这部分代码，添加children属性检查 -->
        <template v-for="item in menuList" :key="item.menu_id || item.index">
          <!-- 添加item.children的存在性检查 -->
          <el-sub-menu v-if="item.children && item.children.length > 0" :index="(item.menu_id || item.index).toString()">
            <template #title >
              <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
              <span>{{ item.menu_name || item.title }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.menu_id || child.index" :index="(child.menu_id || child.index).toString()">
              <el-icon v-if="child.icon"><component :is="child.icon" /></el-icon>
              <span>{{ child.menu_name || child.title }}</span>
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="(item.menu_id || item.index).toString()">
            <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
            <span>{{ item.menu_name || item.title }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </div>
    <!-- 左边栏end -->
  </aside>
</template>

<script setup>
import { ref, computed, markRaw, onMounted } from 'vue'
import { useSysMenuStore } from '@/stores/sys/SysMenuStore'
import { getIconComponent } from '@/utils/iconUtils'
import { useRouter } from 'vue-router'

const router = useRouter()
const menuStore = useSysMenuStore()
const isCollapsed = ref(false)
const hasError = ref(false)
const errorMessage = ref('')

// 在组件挂载时加载菜单数据
// 在组件顶部添加
const isMenuLoading = ref(true)

// 修改 onMounted 钩子
onMounted(async () => {
  try {
    isMenuLoading.value = true
    console.log('Loading menu data...')
    await menuStore.fetchMenuList()
    console.log('Menu data loaded successfully')
    hasError.value = false
  } catch (error) {
    // 现有错误处理逻辑不变
  } finally {
    isMenuLoading.value = false
  }
})


// 优化menuList计算属性，增强错误处理和数据验证
const menuList = computed(() => {
  // 检查menuStore和menuList是否存在
  if (!menuStore || !Array.isArray(menuStore.menuList)) {
    console.warn('Menu store is not available')
    return []
  }

  // 递归处理菜单树，为所有图标应用getIconComponent
  function processMenuItems(items) {
    // 确保items是数组
    if (!Array.isArray(items)) {
      console.warn('Menu items is not an array')
      return []
    }

    try {
      return items.map(item => {
        // 安全地复制item对象，并确保所有必要字段存在
        const processedItem = {
          ...item,
          menu_id: item.menu_id?.toString() || '',
          menu_name: item.menu_name || '',
          icon: item.icon ? getIconComponent(item.icon) : undefined,
          path: item.path || '',
        }

        // 递归处理子菜单
        if (item.children && Array.isArray(item.children)) {
          processedItem.children = processMenuItems(item.children)
        }

        return processedItem
      })
    } catch (error) {
      console.error('Error processing menu items:', error)
      return items // 如果处理失败，返回原始数据
    }
  }

  // 确保返回一个有效的菜单数组
  try {
    const result = processMenuItems(menuStore.menuList)
    console.log('Processed menu items:', result)
    return result
  } catch (error) {
    console.error('Error processing menu items:', error)
    return []
  }
})

// 处理菜单点击事件
const handleMenuClick = (index) => {
  try {
    // 从路由配置中查找meta.index匹配的路由
    const targetRoute = router.getRoutes().find(route => route.meta?.index === index);
    if (targetRoute && targetRoute.name) {
      router.push({ name: targetRoute.name });
    } else {
      console.warn(`未找到index为${index}的路由配置，尝试使用路径跳转`);

      // 尝试使用菜单数据中的path进行跳转作为备选方案
      const currentMenu = findMenuById(index);
      if (currentMenu && currentMenu.path) {
        router.push(currentMenu.path);
      } else {
        console.error(`未找到index为${index}的路由配置，请检查路由meta.index是否正确`);
      }
    }
  } catch (error) {
    console.error('处理菜单点击事件时出错:', error)
  }
}

// 辅助函数：根据menu_id查找菜单项
function findMenuById(menuId) {
  const menus = menuList.value;

  function searchMenu(items) {
    for (const item of items) {
      if (item.menu_id === menuId) {
        return item;
      }
      if (item.children && item.children.length > 0) {
        const found = searchMenu(item.children);
        if (found) return found;
      }
    }
    return null;
  }

  return searchMenu(menus);
}
</script>

<style scoped>
/* 样式部分保持不变 */
.active-link {
  font-weight: bold;
  color: #ffdd57 !important; /* 激活状态的颜色 */
}
</style>
<style scoped>
.el-aside {
  height: 100vh;
  overflow-y: auto;
  width: 250px;
  background-color: #42b983;
  font-weight: bold;
  color: #ffdd57 !important; /* 激活状态的颜色 */
  position: fixed; /* 固定定位 */
  left: 0; /* 靠左 */
  top: 0; /* 顶部对齐 */
}
</style>

<style scoped>
.sidebar-content {
  position: fixed;
  left: 0;
  width: 250px;
  height: 100vh;
  background-color: #42b983;
  overflow-y: auto; /* 添加垂直滚动条 */
}

.el-menu {
  height: auto; /* 改为自动高度 */
  min-height: 100%; /* 确保最小高度填满容器 */
  background-color: #42b983;
  font-weight: bold;
  width: 250px;
  :deep(.el-sub-menu.is-opened) {
    background-color: #d3d5d5;
  }

  :deep(.el-menu-item) {
    background-color: #e2e7e5;
  }

  /* 设置选中栏目的背景色为黄色 */
  :deep(.el-menu-item.is-active) {
    background-color: #ffdd57 !important; /* 黄色 */
    color: #000000 !important; /* 文字颜色改为黑色 */
  }
}
</style>

<style scoped>
.Sidebar {
  width: 250px;
  background-color: #42b983; /* Vue3 标志性绿色 */
  padding: 20px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
  height: 100vh; /* 使侧边栏占满整个高度 */
  /*  position: fixed; 固定定位 */
  left: 0; /* 靠左 */
  top: 0; /* 顶部对齐 */
}
.com-logo-box {
  display: flex;
  align-items: center; /* 使内容垂直居中 */
  margin-bottom: 20px; /* 调整底部间距 */
  /* justify-content: left;
  align-items: left;*/
}

.admin-logo {
  width: 50px; /* 设置图片宽度 图片过大，可以调整width的值。例如，设置为80px或60px等 */
  height: auto; /* 保持图片比例 */
  max-width: 100%; /* 防止图片溢出 */
  border-radius: 10px; /* 添加圆角，10px为轻微圆角 */
}
.admin-title {
  font-size: 24px; /* 设置标题字体大小 */
  color: #ffffff; /* 设置标题颜色 */
  margin-left: 10px; /* 调整标题与图片之间的间距 */
  line-height: 1; /* 确保文本垂直居中 */
  vertical-align: middle; /* 使文本在行内垂直居中 */
}
</style>
